{extend name="template"}

{block name="body"}


<!-- 导航栏 -->
<div class="layui-row common-nav" style="width:100%;position:fixed;top:0;left:0;height:100px;z-index:90;">
    {include file="common/header" /}
</div>
<div id="search_form" style="display: none;z-index:1000;position:absolute;">
    {include file="common/search" /}
</div>

<!-- 轮播图 -->
<div class="layui-row list-carousel" style="width:100%;position:fixed;top:100px;left:0;height:250px;z-index:80;">
    <img style="height:100%;"  src="__ROOT__/static/index/img/subbanner_03.jpg">
</div>

<div class="gas-index layui-fluid" style="width:100%;padding:10px 0 0;background-color:#f7f6f4;position:relative;margin-top:360px;z-index:110;">

    <div class="list-content layui-row margin-top-20">
        <div class="index-content">
            <div class="gas-left-nav pull-left">
                <ul class="nav-list">
                    <li class="header">
                        <span class="head-icon padding-right-5 fa fa-bell"></span>{$product.info.title}
                        <div class="triangle-left"></div>
                    </li>
                    {foreach $product.category as $key=>$vo}
                    {if $vo.id eq $product.selected.id}
                    <li class="selected item">
                        <span class="nav-icon padding-right-5 fa fa-circle-o"></span>
                        <a style="color:inherit;" href="/product.html?id={$vo.id}">{$vo.title}</a>
                    </li>
                    {else}
                    <li class="item">
                        <span class="nav-icon padding-right-5 fa fa-circle-o"></span>
                        <a style="color:inherit;" href="/product.html?id={$vo.id}">{$vo.title}</a>
                    </li>
                    {/if}
                    {/foreach}
                </ul>
            </div>
            <div class="list" style="width:900px">
                <div class="header" style="height:30px;">
                    <div class="pull-left name">{$product.selected.title}</div>
                    <div class="pull-right breadcrumb">
                        <a style="color: inherit;" href="/">首页</a>->{$product.info.title}->{$product.selected.title}
                    </div>
                </div>

                <div class="body-info">
                    <style>
                        .body-info ul li{min-height:320px;padding-bottom:10px;margin-right:15px;margin-bottom:20px;float:left;width:260px;border:1px solid #e7e7e7;}
                        .body-info ul li:nth-child(3n+3) {margin-right:0;}
                        .body-info ul li:hover{border:1px solid red;}
                        .body-info ul li>p{font-size:14px;line-height:20px;}
                    </style>
                    <div style="clear: both;width:100%;margin-top:20px;">
                    <ul>
                        {foreach $product.list as $key=>$vo}

                        <li style="text-align: center;">
                            <img style="height:160px;width:99%;" src="{$vo.logo}" />
                            <p style="font-weight:bold;">{$vo.name}</p>
                            <p>产品品牌：{$vo.name}</p>
                            <p>产品分类：{$vo.category}</p>
                            <p>产品型号：{$vo.model}</p>
                            <p>用途：{$vo.use}</p>
                            <p>适用介质：{$vo.adapter}</p>
                        </li>
                        {/foreach}
                    </ul>

                    </div>


                    {foreach $product.list as $key=>$vo}
                    <dl>
                        <dt class="pull-left">
                            <div class="top"></div>
                            <div class="date">
                                <p class="day">{$vo.create_at|format_datetime='d'}</p>
                                <p>{$vo.create_at|format_datetime='Y-m'}</p>
                            </div>
                        </dt>
                        <dd class="pull-left" style="width:620px;">
                            <p class="title">
                                <a href="/product/detail.html?id={$vo.id}">{$vo.title}</a>
                            </p>
                            <p class="abstract">
                                {$vo.digest}
                            </p>
                        </dd>
                    </dl>
                    {/foreach}
                </div>
                <div style="clear: both;" class="paging" id="test1"></div>
            </div>
        </div>
    </div>

    {include file="common/footer" /}

</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>

<script>
    window.$= layui.$;
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: '{$product.pager.total}' //数据总数，从服务端得到
            ,limit:'{$product.pager.limit}'
            ,curr:'{$product.pager.page}'
        });
        $(".paging a").click(function () {
            var curr = $(this).attr("data-page");
            location.href='/product.html?page='+curr;
        });
    });
</script>
{/block}
